{% extends "base.html" %}

{% block title %}Activity Approval - Volunteer Platform{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="sidebar">
        <nav class="dashboard-nav">
            <ul>
                <li><a href="{{ url_for('admin_dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('admin_users') }}">User Management</a></li>
                <li class="active"><a href="{{ url_for('admin_activities') }}">Activity Approval</a></li>
            </ul>
        </nav>
    </div>

    <div class="main-content">
        <h1>Activity Approval</h1>
        
        <div class="filters">
            <form method="GET" action="{{ url_for('admin_activities') }}" class="filter-form">
                <select name="status" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    <option value="pending" {% if request.args.get('status') == 'pending' %}selected{% endif %}>Pending</option>
                    <option value="approved" {% if request.args.get('status') == 'approved' %}selected{% endif %}>Approved</option>
                    <option value="rejected" {% if request.args.get('status') == 'rejected' %}selected{% endif %}>Rejected</option>
                    <option value="completed" {% if request.args.get('status') == 'completed' %}selected{% endif %}>Completed</option>
                </select>
            </form>
        </div>

        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Activity Name</th>
                    <th>Organization</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Location</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for activity in activities %}
                <tr>
                    <td>{{ activity.id }}</td>
                    <td>
                        <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" target="_blank">
                            {{ activity.title }}
                        </a>
                    </td>
                    <td>{{ activity.organization_name }}</td>
                    <td>{{ activity.start_date.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>{{ activity.end_date.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>{{ activity.location }}</td>
                    <td>{{ activity.status }}</td>
                    <td>
                        {% if activity.status == 'pending' %}
                        <form method="POST" action="{{ url_for('admin_approve_activity', activity_id=activity.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-success">Approve</button>
                        </form>
                        <form method="POST" action="{{ url_for('admin_reject_activity', activity_id=activity.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-danger">Reject</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="pagination">
            {% if page > 1 %}
            <a href="{{ url_for('admin_activities', page=page-1, status=request.args.get('status')) }}" class="btn">Previous</a>
            {% endif %}
            <span class="current-page">Page {{ page }}</span>
            {% if has_next %}
            <a href="{{ url_for('admin_activities', page=page+1, status=request.args.get('status')) }}" class="btn">Next</a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %} 